<template>
    <div class="page-height" ref="height1">
        <!-- 搜索部分-->
        <div class="search-view">
            <el-form :inline="true"  class="demo-form-inline" label-width="100px" size="small">
                <el-form-item label="站点ID">
                    <el-input v-model="query.trademarknum_01" placeholder="请输入站点ID"></el-input>
                </el-form-item>
                <el-form-item label="站点名称">
                    <el-input v-model="query.trademarknum_02" placeholder="请输入站点名称"></el-input>
                </el-form-item>
                <el-form-item label="审核状态">
                    <el-select v-model="query.trademarknum_03" placeholder="请选择">
                        <el-option label="已上线" value="ENABLE"></el-option>
                        <el-option label="不可用" value="DISABLE"></el-option>
                        <el-option label="已删除" value="DELETED"></el-option>
                        <el-option label="未上线" value="EDIT"></el-option>
                        <el-option label="站点下线" value="FORBIDDEN"></el-option>
                        <el-option label="审核通过" value="AUDIT_ACCEPTED"></el-option>
                        <el-option label="审核拒绝" value="AUDIT_REJECTED"></el-option>
                        <el-option label="审核封禁" value="AUDIT_BANNED"></el-option>
                        <el-option label="审核中" value="AUDIT_DOING"></el-option>
                    </el-select>
                    
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                    v-model="query.time"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                
                <el-form-item label="" style="width:300px !important">
                    <el-button type="primary" @click="onSearch()">搜索</el-button>
                    <el-button @click="resetQuery()">重置</el-button>
                    <el-button @click="onRefresh()" icon="el-icon-refresh" circle></el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 表格 -->
        <div style="margin:0 20px"> 
        <el-table :max-height="maxheight" :key="key" :data="tableData" border size="mini" v-loading="loading" element-loading-text="加载中..." stripe
            style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column
            align="center"
            type="selection"
            width="55">
            </el-table-column> 
            <el-table-column prop="site_id" label="站点ID" align="center"></el-table-column>
            <el-table-column prop="name" label="站点名称" align="center"></el-table-column>
            <el-table-column prop="thumbnail" label="缩略图" align="center">
                <template slot-scope="scope">
                    <el-image 
                        style="width:80px; height: 80px"
                        :src="scope.row.thumbnail" 
                        :preview-src-list="[scope.row.thumbnail]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="url" label="站点预览地址" align="center">
                <template slot-scope="scope">
                    <el-link :href="scope.row.url" :underline="false" type="primary" target="_blank">点击预览</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="audit_status" label="审核状态" align="center">
                <template slot-scope="scope">
                    <el-button type="success" v-if="scope.row.audit_status =='ENABLE'" size="mini">已上线</el-button>
                    <el-button type="info" v-if="scope.row.audit_status =='DISABLE'" size="mini">不可用</el-button>
                    <el-button type="warning" v-if="scope.row.audit_status =='DELETED'" size="mini">已删除</el-button>
                    <el-button  v-if="scope.row.audit_status =='EDIT'" size="mini">未上线</el-button>
                    <el-button type="warning" v-if="scope.row.audit_status =='FORBIDDEN'" size="mini">站点下线</el-button>
                    <el-button type="primary" v-if="scope.row.audit_status =='AUDIT_ACCEPTED'" size="mini">审核通过</el-button>
                    <el-button type="danger" v-if="scope.row.audit_status =='AUDIT_REJECTED'" size="mini">审核拒绝</el-button>
                    <el-button type="warning" v-if="scope.row.audit_status =='AUDIT_BANNED'" size="mini">审核封禁</el-button>
                    <el-button type="success" v-if="scope.row.audit_status =='AUDIT_DOING'" size="mini">审核中</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间" align="center"></el-table-column>
        </el-table>
    </div>
        <div class="pagination-view">
            <el-pagination background layout="sizes, prev, pager, next" :current-page="page" :total="total"
                :page-sizes="[10, 20, 50, 100]" :page-size="page_size" @current-change="getData"
                @size-change="handleSizeChange"  />
        </div>
    </div>
</template>

<script>
export default {
    name: 'landing',
    data() {
        return {
            key:0,
            maxheight:0,
            loading:false,
            query: {
                trademarknum_01: '',
                trademarknum_02: '',
                trademarknum_03: '', 
                time:''
            },
            tableData: [],
            total: 0,
            page: 1,
            page_size: 10,
        }
    },
    created() {
       
        this.getData(1)
    },
    watch: {
        getCurrent: function () {
            this.getData(1)
        }
    },
    mounted(){
        let height1 = this.$refs.height1.clientHeight;
        this.maxheight = height1 - 75
        this.key++
    },
    methods: {

        qujianchange(e){
            this.query[e.sttype] = e.money
        },


        handleSelectionChange(){

        },
        // 搜索
        onSearch(e) {
            this.getData(1)
        },
        //重置搜索
        resetQuery() {
           this.query={
               trademarknum_01: '',
                trademarknum_02: '',
                trademarknum_03: '',
                time:''
            },
            this.getData(1)
        },

        // 刷新
        onRefresh() {
            this.getData()
        },
        //page_size发生变化
        handleSizeChange(e) {
            this.page_size = e
            this.getData(1)
        },
        getData(page = null) {

            if (page) this.page = page
            var query = this.query
            query['page'] = this.page
            query['pageSize'] = this.page_size
            this.loading = true
            this.$api.post('/api/demo/landing', query).then((res) => {
                const list = res.data.list || []
                this.tableData = list
                this.total = res.data.total
                this.loading = false
            }).catch((err) => {
                this.apiErr(err)
            }).finally(() => {
                this.loading = false
                this.loadingHide()
            })
        },
    }
}
</script>

<style lang="scss" scoped>


.search-view {
    padding: 20px 20px 0;
    margin-bottom:20px;
    .el-form-item {
        width: 260px;
        margin-bottom: 10px;

        .input {
            width: 150px;
        }
    }
}

.btn-group {
    margin-bottom: 10px;

    .el-button {
        margin-left: 0;
        margin-right: 10px;
        margin-top: 10px;
    }
}

.color_bule {
    color: #4490e7;
    cursor: pointer;
}

.item-text {
    padding: 0 8px;
}
</style>
